<template>
	<view class="page">
		<view class="list">
			<view class="item" v-for="(item,index) of modelData" :key="index" @click="toPage(item)">
				<view class="image">
					<image :src="item.image" mode="widthFix"></image>
				</view>
				<view class="title">
					<view>{{item.name}}</view>
					<view class="path">{{item.path}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				modelData: [
					{name:'模板A',image:'../static/index/model1.png',path:'/pages/login-A',nav:'/loginByPhone'},
					{name:'模板B',image:'../static/index/model2.png',path:'/pages/login-B',nav:'/login'},
					{name:'模板C',image:'../static/index/model3.png',path:'/pages/login-C',nav:'/register'}
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods:{
			toPage(item){
				uni.navigateTo({
					url:item.path+item.nav
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f8f8f8;
		.list{
			padding: 40rpx;
			.item{
				border-radius: 30rpx;
				overflow: hidden;
				margin-bottom: 40rpx;
				background-color: #fff;
				box-shadow: 0 2rpx 10rpx 4rpx rgba(0, 0, 0, .1);
				.image{
					width: 100%;
					image{
						vertical-align: middle;
						width: 100%;
					}
				}
				.title{
					padding: 30rpx;
					display: flex;
					align-items: baseline;
					justify-content: space-between;
					.path{
						font-size: 26rpx;
						color: #262626;
					}
				}
			}
		}
	}
</style>